<template>
    <div class="main">
        <div class="swiper" v-if="winwidth <= 768">
            <mobSwiper :butType="2" isType @typeChange="typeChange" :typeList="typelist" :list="typeList2" />
        </div>
        <div v-for="(i, d) in list" :key="i.id">
            <div class="goods content" v-if="i.type == 1" data-aos="fade" data-aos-duration="1000"
                :class="{ img1: d == 0, img2: d != 0 }" v-lazy-load2>
                <!-- 第一个图片 -->
                <img v-if="i.txt" :data-src="i.url" src="" alt="" class="lazy-img">

                <!-- 第二个图片（主要图片） -->
                <img :class="{ txt: i.txt }" :data-aos="i.txt ? 'fade-up' : 'fade'" data-aos-delay="300"
                    data-aos-easing="linear" data-aos-duration="1000" :data-src="i.txt ? i.txt : i.url" src=""
                    @click="goLink(i.link)" :style="{ cursor: i.link ? 'pointer' : 'default' }" class="lazy-img">

                <!-- 第三个图片 -->
                <img v-if="i.txt2" class="txt2 lazy-img" data-aos="fade-up" data-aos-delay="1200"
                    data-aos-easing="linear" data-aos-duration="1000" :data-src="i.txt2" src="">
            </div>
            <div v-if="i.type == 10 && $store.state.winWidth > 768" class="swiper">
                <carousel :butType="0" :list="i.more" />

            </div>
            <div v-if="i.type == 10 && $store.state.winWidth <= 768" class="swiper">
                <mobSwiper :autoplay="true" @typeChange="typeChange" :list="i.more" />
            </div>
            <div :class="{ video: true, img1: d == 0 }" v-lazy-load="i.url" v-if="i.type == 5 && i.url">
                <video muted :autoplay="true" :loop="true"></video>
            </div>
        </div>


    </div>
</template>

<script>
import mobSwiper from '@/components/mobSwiper.vue'
import carousel from '@/components/carousel.vue';
export default {
    components: {
        carousel,
        mobSwiper
    },
    data() {
        return {
            current: 0,
            list: [],

            typelist: [],
            typeList2: [],
            winwidth: ''
        }
    },
    mounted() {
        this.winwidth = this.$store.state.winWidth
        // 移动端
        if (this.winwidth < 768) {
            this.getMobileData()
            this.getType()
        } else {
            this.getData()

        }
    },
    methods: {
        typeChange(id) {
            this.typelist.forEach(i => {
                if (i.id == id) {
                    this.typeList2 = i.list
                }
            })
        },

        isUrl(str) {
            const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]+(:\d+)?(\/[\w-./?%&=]*)?(#[\w-./?%&=]*)?$/;

            return urlPattern.test(str);
        },

        isPath(str) {
            return str.startsWith('/') && !str.startsWith('//');
        },

        // 跳转外部链接
        goLink(url) {
            if (!url) {
                return
            }

            let isUrl = this.isUrl(url);
            let isPath = this.isPath(url);


            // 网址跳转
            if (isUrl) {
                window.open(url, '_blank');
            }

            //页面跳转
            if (isPath) {
                const route = this.$router.resolve({
                    path: url,
                });
                window.open(route.href, '_blank');
            }

        },
        change(e) {
            this.current = e
        },
        getType() {
            this.$api.getTypeList().then(res => {
                if (res.code == 1) {
                    this.typelist = res.data.list
                }
            })
        },
        getData() {
            this.$api.getHome().then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.list = res.data.list
                }
            })
        },



        getTypeList() {
            this.$api.mobileTypeList().then(res => {
                if (res.code == 1) {
                    console.log('type列表是', res.data)
                    this.typeList = res.data.list
                    this.typeChange(res.data.list[0].id)
                }
            })
        },

        getMobileData() {
            this.$api.getMobileHome().then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.list = res.data.list
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    font-size: 0;
}

.img1,
.img2 {
    position: relative;
    // padding-top: 72px;
    overflow-x: hidden;

    img {
        width: 100vw;
        height: auto;
    }

    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 65px;
        width: 100%;
        left: 0;
        right: 0;
        color: #fff;

        .title {
            margin: 0 0 30px;
            font-family: MiSans;
            font-weight: 600;
            font-size: 61px;
            color: #FFFFFF;
        }

        >span {
            display: block;
            margin: 0 0 20px;
            font-family: MiSans;
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;
        }

        // .info_1 {
        //     display: flex;
        //     align-items: center;
        //     font-weight: 500;
        //     font-size: 30px;
        //     color: #FFFFFF;
        // }
    }

}


.img2 {
    padding-top: 0;
}

::v-deep .el-divider--vertical {
    margin: 0 30px;
    width: 3px;
}

.video {
    width: 100%;
    min-height: 500px;

    video {
        width: 100%;
        height: auto;
    }
}

.goods {
    min-height: 500px;
    position: relative;
    overflow: hidden;

    .txt2 {
        position: absolute;
        z-index: 221;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }

    .txt {
        position: absolute;
        z-index: 222;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }
}

.main {
    font-size: 0;
}

.img1,
.img2 {
    position: relative;
    overflow-x: hidden;

    img {
        width: 100vw;
        height: auto;

        &.lazy-img {
            opacity: 0;
        }

        &.lazy-loaded {
            opacity: 1;
        }

        &.lazy-error {
            opacity: 1;
            filter: grayscale(80%);
        }
    }

    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 65px;
        width: 100%;
        left: 0;
        right: 0;
        color: #fff;

        .title {
            margin: 0 0 30px;
            font-family: MiSans;
            font-weight: 600;
            font-size: 61px;
            color: #FFFFFF;
        }

        >span {
            display: block;
            margin: 0 0 20px;
            font-family: MiSans;
            font-weight: 500;
            font-size: 30px;
            color: #FFFFFF;
        }
    }
}

.img2 {
    padding-top: 0;
}

::v-deep .el-divider--vertical {
    margin: 0 30px;
    width: 3px;
}

.video {
    width: 100%;
    min-height: 1000px;

    video {
        width: 100%;
        height: auto;
    }
}
</style>